<template>
    <div class="list-common-tab">
      <el-row :gutter="20">
        <el-col :span="18">
          <el-input
            v-model="search"
            placeholder="请输入检索内容"
            @keyup.enter="handleSearch"
            input-style="padding-right:30px"
          ></el-input>
        </el-col>
        <el-col :span="6" class="operation-container">
          <el-button type="primary" @click="handleSearch">检索</el-button>
          <el-button type="info" @click="handleClear">清空</el-button>
          <el-button type="primary" @click="handleCreateUnit">新建</el-button>
        </el-col>
      </el-row>
      <div class="star-table-container">
        <el-table
          :data="unitList"
          :stripe="stripe"
        >
          <el-table-column prop="orgName" label="机构名称" />
          <el-table-column prop="showOrder" align="center" label="排序" width="80" />
          <el-table-column prop="op" align="center" label="操作" width="200">
            <template #default="scope">
              <el-button type="primary" @click="handleUnitManager(scope)" >操作</el-button>
              <el-popconfirm :title="showContent(scope)" width="200" @confirm="handleRemoveUnit(scope)">
                <template #reference>
                  <el-button type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="star-table-pagination">
        <el-pagination
          background
          :total="listTotal"
          :layout="pageOperate"
          :default-page-size="size"
          :page-sizes="listPageSizes"
          v-model:page-size="pageSize"
          @size-change="handleSizeChange"
          v-model:current-page="currentPage"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
      <el-dialog
        center
        draggable
        title="机构管理"
        destroy-on-close
        v-model="visibleForm"
        :close-on-click-modal="false"
      >
        <unit-form :id="unitId" :fid="props.fid" @close-dialog="closeDialog" @reload-data="reloadData" />
      </el-dialog>
    </div>
  </template>

<script setup>
import { ElMessage } from 'element-plus'
import UnitForm from '@/views/system/unit/UnitForm'
import { ref, onMounted, watch, computed } from 'vue'
import { stripe, size, pageOperate, listPageSizes } from '@/config/list'
import { loadUnitByFid, deleteUnit } from '@/api/system/unit/UnitManager'

import '@/style/list.less'

const search = ref('')
const unitId = ref('')
const unitList = ref([])
const listTotal = ref(0)
const pageSize = ref(size)
const currentPage = ref(1)
const visibleForm = ref(false)
const emit = defineEmits(['change-data'])
const props = defineProps({ fid: String })

const handleSearch = () => {
  currentPage.value = 1
  loadListData()
}

const handleClear = () => {
  currentPage.value = 1
  search.value = ''
  loadListData()
}

const handleUnitManager = (scope) => {
  unitId.value = scope.row.id
  visibleForm.value = true
}

const handleRemoveUnit = (scope) => {
  deleteUnit(scope.row.id).then(() => {
    ElMessage({
      message: '删除成功!',
      type: 'success',
      duration: 800
    })
    reloadData()
  }).catch(error => {
    ElMessage.error(error.message)
  })
}

const handleCreateUnit = () => {
  console.log(props.fid)
  unitId.value = ''
  visibleForm.value = true
}

const closeDialog = () => {
  visibleForm.value = false
}

const reloadData = () => {
  loadListData()
  emit('change-data')
}

const showContent = computed(() => (scope) => {
  return `是否要删除${scope.row.orgName}？`
})

const loadListData = () => {
  loadUnitByFid({
    fid: props.fid,
    current: currentPage.value,
    pageSize: pageSize.value,
    search: search.value
  }).then(data => {
    const { total, list } = data
    listTotal.value = total
    unitList.value = list
  })
}

const handleSizeChange = () => {
  loadListData()
}

const handleCurrentChange = () => {
  loadListData()
}

watch(
  () => props.fid,
  () => {
    currentPage.value = 1
    search.value = ''
    loadListData()
  }
)

onMounted(() => {
  loadListData()
})
</script>
